<template>
  <div class="signLogin">
    <div class="bg"></div>
    <div class="sign-bg">
      <div class="forms">
        <div class="forms-tit">员工登录</div>
        <div class="input-div">
          <input
            v-model="username"
            placeholder="请输入账号"
            @keydown="addByEnterKey"
          />
        </div>
        <div class="input-div">
          <input
            @keydown="addByEnterKey"
            v-model="password"
            type="password"
            placeholder="请输入密码"
          />
        </div>
        <div class="input-div2 flex between">
          <div class="code-div">
            <input
              v-model="code"
              placeholder="请输入验证码"
              @keydown="addByEnterKey"
            />
          </div>
          <img :src="codeImg" class="pointer" @click="getCodeImg" />
        </div>
        <div class="login-btn pointer" @click="toLogin">登录</div>
      </div>
    </div>
  </div>
</template>
<script>
import { staff, common } from "@/api/apiData";
import CryptoJS from "crypto-js";
export default {
  data() {
    return {
      username: "",
      password: "",
      code: "",
      codeImg: "",
      captcha_id: "",
    };
  },
  mounted() {
    // this.$bus.emit("navS", 0);
    this.getCodeImg();
  },

  methods: {
    getCodeImg() {
      common.captcha().then((res) => {
        this.codeImg = res.data.content;
        this.captcha_id = res.data.uniqid;
      });
    },
    toReset(u) {
      this.$router.push(u);
    },
    toLogin() {
      staff
        .login({
          captcha_code: this.encryptData(this.code),
          captcha_id: this.captcha_id,
          account: this.username,
          password: this.encryptData(this.password),
        })
        .then((res) => {
          if (res.code == 1) {
            this.$message({
              type: "success",
              message: "登陆成功",
            });
            localStorage.setItem("token", res.data.token);
            this.$router.push("/index");
          } else {
            this.getCodeImg();
            this.$message.error(res.msg);
          }
        });
    },
    encryptData(word) {
      const key = CryptoJS.enc.Utf8.parse("d887aed2239884eb"); // 密钥
      const iv = CryptoJS.enc.Utf8.parse("b2df5feec9d499c9"); // 密钥偏移量
      let srcs = CryptoJS.enc.Utf8.parse(word);
      let encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7,
      });
      let encryptedBase64Data = CryptoJS.enc.Base64.stringify(
        encrypted.ciphertext
      );
      return encodeURIComponent(encryptedBase64Data);
    },
    addByEnterKey(e) {
      if (e.keyCode == 13) {
        this.toLogin();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #539fea;
  z-index: -1;
}
.sign-bg {
  width: 100%;
  .forms {
    background: white;
    width: 80%;
    padding: 20px;
    margin: 130px auto;
    text-align: left;
    .forms-tit {
      font-size: 30px;
      text-align: center;
      font-weight: bold;
    }
    .input-div {
      padding: 10px;
      border-bottom: solid 1px #d1d1d1;
      margin-top: 40px;
    }
    input {
      border: none;
      font-size: 24px;
      outline: none;
    }

    .input-div2 {
      margin: 60px 0 20px;
      .code-div {
        width: 48%;
        border: solid 1px #d1d1d1;
        padding: 10px;
      }
      input {
        width: 100%;
        height: 100%;
      }
      img {
        width: 45%;
      }
    }
    .tips {
      color: #838282;
      font-size: 14px;
      text-align: right;
    }
    .login-btn {
      width: 100%;
      background: #0089e1;
      color: white;
      font-size: 30px;
      text-align: center;
      font-weight: bold;
      line-height: 80px;
      border-radius: 4px;
      margin: 80px 0 20px;
    }
  }
}
</style>